<template>
    <div class="fillcontain">
        <el-form :model="formData" label-position="labelPosition" inline="true" ref="formData"
                 class="demo-form-inline" style="margin-left: 10px;margin-right: 10px">

            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px" v-model="formData.schoolid" @change="schoolchange"
                               placeholder="请选择校区">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px" v-model="formData.eid" placeholder="请选择老师">
                        <el-option
                            v-for="item in empsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-input
                        size="mini"
                        style="width: 220px"
                        v-model="formData.username"
                        placeholder="请输入姓名"
                        prefix-icon="el-icon-search"
                    >
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-date-picker size="mini" style="width: 220px"
                                    v-model="formData.querytime"
                                    align="right"
                                    type="date"
                                    value-format="yyyyMMdd"
                                    placeholder="日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-button type="primary" @click="select" size="mini" icon="el-icon-search">搜索</el-button>
        </el-form>

        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                :spanMethod="objectSpanMethod"
                style="width: 100%">
                <!--<el-table-column
                    property="id"
                    label="全选"
                    min-width="5%">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.status" :true-label="1" :false-label="2"></el-checkbox>
                    </template>
                </el-table-column>-->

                <el-table-column
                    property="id"
                    label="状态"
                    min-width="15%">
                    <template slot-scope="scope">
                        <el-switch
                            size="mini"
                            active-text="上课"
                            inactive-text="请假"
                            active-value="1"
                            inactive-value="2"
                            v-model="scope.row.status"
                            >
                        </el-switch>
                    </template>
                </el-table-column>


                <el-table-column
                    property="id"
                    label="序号"
                    min-width="7%">
                </el-table-column>
                <el-table-column
                    property="username"
                    label="姓名"
                    min-width="7%">
                </el-table-column>
                <el-table-column
                    property="remainclass"
                    label="余课参考"
                    min-width="7%">
                </el-table-column>
                <el-table-column
                    property="remaincash"
                    label="余费参考"
                    min-width="7%">
                </el-table-column>
                <el-table-column
                    property="periodname"
                    label="上课时间"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="shouldDay"
                    label="应上时间"
                    :formatter="dateFormat"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="subject"
                    label="本次上课课题"
                    min-width="10%">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.subject" v-if="scope.row.username!=null" size="mini"
                                  placeholder="本次上课主题"></el-input>
                        <el-checkbox v-if="scope.row.username==null" @change="selectAll($event,'subject')"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column
                    property="comments"
                    label="请假备注"
                    min-width="10%">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.comments" v-if="scope.row.username!=null" size="mini"
                                  placeholder="请假备注"></el-input>
                        <el-checkbox v-if="scope.row.username==null" @change="selectAll($event,'comments')"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column
                    property="summary"
                    label="本章小节"
                    min-width="10%">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.summary" v-if="scope.row.username!=null" size="mini"
                                  placeholder="本章小节"></el-input>
                        <el-checkbox v-if="scope.row.username==null" @change="selectAll($event,'summary')"></el-checkbox>
                    </template>
                </el-table-column>
            </el-table>
            <el-row>
                <el-col :offset="10">
                    <el-button type="primary" @click="submitCheck" size="small" style="margin-top: 20px">提交</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import * as moment from 'moment';
    import headTop from '../components/headTop'
    import {submitCheckWork,addcheckWorkList} from '@/api/getData'
    import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";
    import ElRow from "element-ui/packages/row/src/row";
    import ElCheckbox from "../../node_modules/element-ui/packages/checkbox/src/checkbox.vue";

    export default {
        computed: {
            ...mapGetters(['schoolList', 'usertypeList', 'periodList', 'empschoolMap', 'onusertypeList'])
        },
        data() {
            return {
                empsList: [],
                formData: {
                    schoolid: '',
                    eid: '',
                    usertype: '',
                    periodid: '',
                    querytime: moment().format('YYYYMMDD'),
                    username: '',
                    pageno: 1,
                    pagesize: 10,
                },
                tableData: [],
                currentRow: null,
                offset: 0,
                limit: 20,
                count: 4 + 1,
                currentPage: 1,
            }
        },
        mounted() {
            if (this.periodList==null) {
                this.getPeriod();
            }
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if (this.schoolList == null) {
                this.getAllSchool();
            }
        },
        components: {
            ElCheckbox,
            ElRow,
            ElButton,
            headTop,
        },
        created() {
              this.initData();
        },
        methods: {
            ...mapActions(['getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),
            selectAll(event,v) {
                if (v == 'subject') {
                    for (var i = 0; i < this.tableData.length; i++) {
                        if (i != 0) {
                            var temp= event?this.tableData[0].subject:'';
                            const v=this.tableData[i];
                            v.subject=temp;
                            this.$set(this.tableData,i,v)
                        }
                    }

                } else if (v == 'comments') {
                    for (var i = 0; i < this.tableData.length; i++) {
                        if (i != 0) {
                            var temp= event==true?this.tableData[0].comments:'';
                            const v=this.tableData[i];
                            v.comments=temp;
                            this.$set(this.tableData,i,v)
                        }
                    }

                } else if (v == 'summary') {
                    for (var i = 0; i < this.tableData.length; i++) {
                        if (i != 0) {
                            var temp= event==true?this.tableData[0].summary:'';
                            const v=this.tableData[i];
                            v.summary=temp;
                            this.$set(this.tableData,i,v)
                        }
                    }

                }
            },
            dateFormat:function(row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD HH:mm");
            },
            schoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.empsList.push(item);
                    });
                }
            },
            objectSpanMethod({row, column, rowIndex, columnIndex}) {

            },


            async select() {
                this.initData();
            },

            async submitCheck() {
                var data = {"data": this.tableData}
                alert(JSON.stringify(this.tableData));
                let result = await submitCheckWork(data);
                if (result.success == true) {
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    });
                }
            },

            addCheckWork(index, row) {

            },
            async initData() {
                const v = await addcheckWorkList({"data": this.formData});
                if (v.success == true) {
                    this.count=v.data.totalCount;
                    const studList = v.data.values;
                    this.tableData = [];
                    studList.forEach(item => {
                        const td = {};
                        td.status=2;
                        td.id=item.id;
                        td.uid=item.uid;
                        td.checked=false;
                        td.username = item.username;
                        td.ename = item.ename;
                        td.schoolname = item.schoolname;
                        td.subject = item.subject;
                        td.periodname=item.periodname;
                        td.comments = item.comments;
                        td.summary = item.summary;
                        td.periodid=item.periodid;
                        td.remainclass=item.remainclass;
                        td.remaincash=item.remaincash;
                        td.shouldDay=item.shouldDay;
                        this.tableData.push(td);
                    })
                    this.tableData.push({});
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1) * this.limit;
                this.initData();
            },

        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
